/* 
  目标：使用props校验 - 校验title为字符串
  1. 导入prop-types包
  2. 给组件设置propTypes属性
  3. 添加校验规则，使用PropTypes对象来提供数据类型
*/
import React from 'react';

// 1. 导入prop-types包
/* 
  注意：
  1.1 prop-types包不用下载，脚手架自带
  1.2 👍 推荐：使用PropTypes作为导入的变量名，不建议自定义包名
*/
import PropTypes from 'prop-types';
export default class App extends React.Component {
  render() {
    return (
      <div>
        <Hello title="hello 666"></Hello>
      </div>
    );
  }
}

class Hello extends React.Component {
  render() {
    return <div>{this.props.title}</div>;
  }
}

// 2.  给组件设置propTypes属性
/* 
  注意：
  2.1 propTypes属性名是固定写法，不能改变。注意propTypes是小写开头的驼峰名，不要与包名PropTypes搞混了
  2.2 组件类型定义，要写在组件声明之后
*/
Hello.propTypes = {
  // 3. 添加校验规则，使用PropTypes对象来提供数据类型
  // 注意：3.1. 键名代表要检验的prop标签属性名, 值为数据类型
  // 3.2 类型是小写字母开头
  title: PropTypes.string,
};
